<template>
  <div class="scroll">
    <example-card title="通知" url="http://element.eleme.io/#/zh-CN/component/notification">
      <div>
        <el-button plain @click="autoClose">可自动关闭</el-button>
        <el-button plain @click="notAutoClose">不会自动关闭</el-button>
      </div>
      <div>
        <el-button plain @click="() => position()">右上角</el-button>
        <el-button plain @click="() => position('bottom-right')">右下角</el-button>
        <el-button plain @click="() => position('bottom-left')">左下角</el-button>
        <el-button plain @click="() => position('top-left')">左上角</el-button>
      </div>
      <div>
        <el-button plain @click="offset">偏移的消息</el-button>
      </div>
      <div>
        <el-button plain @click="html">使用 HTML 片段</el-button>
      </div>
      <div>
        <el-button plain @click="global">非组件内调用</el-button>
      </div>
    </example-card>
  </div>
</template>

<script>
  import { Notification } from 'element-ui';

  export default {
    name: "notice_notify_view",
    methods: {
      autoClose() {
        const h = this.$createElement;
        this.$notify({
          title: "标题名称",
          message: h("i", { style: "color: teal" }, "这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案")
        });
      },
      notAutoClose() {
        this.$notify({
          title: "提示",
          message: "这是一条不会自动关闭的消息",
          duration: 0
        });
      },
      position(p = "top-right") {
        this.$notify({
          title: "自定义位置",
          message: "弹出的消息",
          position: p
        });
      },
      offset() {
        this.$notify({
          title: "偏移",
          message: "这是一条带有偏移的提示消息",
          offset: 100
        });
      },
      html() {
        this.$notify({
          title: "HTML 片段",
          dangerouslyUseHTMLString: true,
          message: "<strong>这是 <i>HTML</i> 片段</strong>"
        });
      },
      global() {
        Notification({
          title: 'Info',
          message: '这是一条没有关闭按钮的消息',
          showClose: false
        });
      }
    }
  };
</script>

<style scoped>

</style>
